<template>
  <div class="school">
    <div class="wrap">
      <div class="swiper mySwiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in contentData" :key="index">
            <img :src="'http://itdahua.com' + item.image" />
            <div class="mast">
              <div class="content">
                <h4 style="font-size: 16px;padding-bottom: 12px;">{{ item.title }}</h4>
                <p style="font-size:12px;">{{ item.content }}</p>
              </div>
              <div class="pagenation">
                <span style="color: rgb(85, 183, 246);">{{ index + 1 }}</span>/7
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-next" style="width:60px; height:60px;color:#fff; background:rgb(85, 183, 246);border-radius: 50%;font-size:12px"></div>
        <div class="swiper-button-prev" style="width:60px; height:60px;color:#fff; background:rgb(85, 183, 246);border-radius: 50%;font-size:12px"></div>
      </div>
      <div thumbsSlider class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in contentData" :key="index">
            <img :src="'http://itdahua.com' + item.image" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import axios from "axios"
import Swiper from "swiper/swiper-bundle.min.js";
import "swiper/swiper-bundle.min.css";
import Footer from '@/components/footer/Footer.vue'

export default {
  name: "school",
  data() {
    return {
      contentData: []
    }
  },
  components:{
    Footer

  },
  async created() {
    let res = await axios.get('api/style/list?content-Type=multipart%2Fform-data');
    this.contentData = res.data.data;
  },
  watch: {
    contentData(val) {
      if (val) {
        this.$nextTick(() => {
          var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 6.5,
            freeMode: true,
            watchSlidesProgress: true,
          });
          var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            thumbs: {
              swiper: swiper,
            },
          });
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.school {
  overflow: hidden;
  .wrap {
    width: 100%;
    height: 911px;
    margin-top: 50px;
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .mySwiper2 {
      height: 80%;
      width: 1200px;
      position: relative;
      .mast {
        position: absolute;
        width: 1200px;
        bottom: 0;
        left: 0;
        height: 114px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 30px;
        .cont {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 114px;
        }
        .pagenation {
          color: #fff;
          font-weight: 700;
          font-size: 18px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .mySwiper {
      width: 1200px;
      margin-top: 20px;
      img {
        width: 172px;
        height: 108px;
      }
      p {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>